<template>
	<view class="wm">
		<block v-if="detail.introduce && detail.direction && detail.prospect">
			<view class="title">
				<view class="left"></view>
				<div class="center">{{detail.name}}</div>
				<view class="right"></view>
				
			</view>
			<view class="container">
				<view class="c_title">
					<view class="triangle"></view>
					专业介绍
				</view>
				<view class="content">
					{{detail.introduce ? detail.introduce : "无"}}
				</view>
			</view>
			<view class="container">
				<view class="c_title">
					<view class="triangle"></view>
					就业方向
				</view>
				<view class="content">
					{{detail.direction ? detail.direction : "无"}}
				</view>
			</view>
			<view class="container">
				<view class="c_title">
					<view class="triangle"></view>
					就业前景
				</view>
				<view class="content">
					{{detail.prospect ? detail.prospect : "无"}}
				</view>
			</view>
			<view class="tip">
				<uni-icons type="smallcircle-filled" size="12" color="#999"></uni-icons>
				专业介绍内容来源于不同高校仅供参考！
				<uni-icons type="smallcircle-filled" size="12" color="#999"></uni-icons>
			</view>
		</block>
		<block v-else>
			<no-data></no-data>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				require:{
					id:0
				},
				detail:{}
			};
		},
		onLoad(option) {
			this.require.id = option.id
			this.get_major_detail();
		},
		methods:{
			/**
			 * 获取专业详情
			 */
			async get_major_detail(){
				const {data:res} = await uni.$http.post("Schools/major_detail",this.require)
				if(res.meta.status == 0) return uni.$showMsg()
				this.detail = res.data
			}
		}
		
	}
</script>

<style lang="scss">
.title{
	margin:60rpx 0;
	font-size:50rpx;
	text-align: center;
	font-weight: bold;
	display:flex;
	justify-content: center;
	align-items: center;
	
	.right{
		height: 50rpx;
		width: 100rpx;
		background:url(../../static/right.png) no-repeat;
		background-size:100% auto;
		background-position: left;
		margin-left:15rpx;                                            
	}
	.center{
		height:50rpx;
		line-height: 50rpx;
	}
	.left{
		height: 52rpx;
		width: 100rpx;
		background:url(../../static/left.png) no-repeat;
		background-size:100% auto;
		background-position: right;
		margin-right:15rpx;       
	}
}
.container{
	text-indent:2em;
	background:"#fff";
	padding:20px;
	padding-top:90rpx;
	border-radius: 15rpx;
	box-shadow: 0px 0px 5px #ccc;
	margin-bottom:15rpx;
	position: relative;
	
	z-index: 21;
	.c_title{
		text-indent:0em;
		background:linear-gradient(to right,#93bdf3,#68d0e3);
		height:50rpx;
		line-height: 48rpx;
		border-radius: 0 25rpx 25rpx 5px;
		margin-top:-65rpx;
		width: 240rpx;
		text-align: center;
		position:absolute;
		left:-12rpx;
		color:#fff;
		z-index: 0;
		.triangle{
			height:0;
			width:0;
			position:absolute;
			border-right:12rpx #93bdf3 solid;
			border-top:12rpx rgba(0,0,0,0) solid;
			border-left:12rpx rgba(0,0,0,0)  solid;
			border-bottom:12rpx  rgba(0,0,0,0)  solid;
			z-index: 20;
			margin-top:-12rpx;
			margin-left:-12rpx;
		}
	}
}
.tip{
	font-size:20rpx;
	text-align: center;
	color:#999;
	margin:30rpx 0 80rpx 0;
}
</style>
